<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React基础</title>

    <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 银日 react-dom 用于支持 react 操作 DOM -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入 bable ,用于 Jsx 转为 Js -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>
<body>

    <div id="test"></div>

    <div id="test2"></div>


    <script type="text/babel">  /* 此处的 babel 表示利用引入的 babel 翻译 */
    // 1.创建虚拟DOM
    const VDOM = <h1>Hello World</h1>
    // 2.渲染页面
    ReactDOM.render(VDOM,document.getElementById("test"))
        
    </script>

    <script type="text/babel">
        // 创建类并继承父类
        class Weather extends React.Component{
            // // 创建构造器
            // constructor(props){
            //     // 调用继承父类
            //     super(props)
            //     // 初始化状态
            //     this.state = {isHost:false}
            //     // 解决 this 指向问题
            //     this.changeWeather = this.changeWeather.bind(this)
            // }

            // 初始化状态
            state = {isHost:false,wind:"微风"}
            render(){
                // 获取状态
                const {isHost,wind} = this.state
                return <h1 onClick={this.changeWeather}>今天天气很好{isHost ? "炎热":"凉爽"},{wind}</h1>
            }

            // changeWeather(){
            //     // 获取原来的 isHost 值，并进行更改，且这里状态只能通过setState更改
            //     const isHost = this.state.isHost
            //     this.setState({isHost: !isHost})
            // }
            
            // 自定义方法，要用赋值语句的方式 + 箭头函数
            changeWeather = () =>{
                // 获取原来的 isHost 值，并进行更改，且这里状态只能通过setState更改
                const isHost = this.state.isHost
                this.setState({isHost: !isHost})
            }

        }
        ReactDOM.render(<Weather/>,document.getElementById("test2"))
    </script>
    
</body>
</html>